<!DOCTYPE html>
<html>
<head>
<title>Lightbox CSS, d&eacute;mo de contenu dynamique</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link type="text/css" rel="stylesheet" href="lightbox-css.css">
<script src="lightbox.js" type="text/javascript"></script>

</head>

<body>
<h1>Lightbox CSS, d&eacute;mo de contenu dynamique</h1>
<p>D&eacute;monstration de la lightbox universelle avec un contenu modifi&eacute; dynamiquement.</p>

<br>

<div id="shadowing"></div>
<div id="box">
	<div id="boxheader">
		<span id="boxtitle"> Titre pour le contenu (image, formulaire ou autre)</span>
		   <span id="boxclose" onclick="closebox()"> </span>
	</div>
	<div id="boxcontent"> Et ceci est le contenu statique provisoire de la boite. <br>
		    <br>
		    Contenu dynamique en cliquant... 
	</div>
</div>


<p>Pour afficher une image dans la lightbox,</p>
<p>cliquer sur la vignette de cette image...</p> 
<img src="images/thumb-sea.jpg" width="150" height="150" onclick="openbox('images/small-sea.jpg');">
<img src="images/thumb-goldisle.jpg" width="150" height="150" onclick="openbox('images/goldisle.jpg');">
<img src="images/thumb-greenhouse.jpg" width="150" height="150" onclick="openbox('images/greenhouse.jpg');">

<br>

<hr>

<p>(c) 2008 <a href="http://www.xul.fr">xul.fr</a></p>
</body>
</html>
